<template>
  <div class="propertyEditor">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="grid-content">
          <el-form ref="propertyTypeModel" :model="propertyTypeModel" label-width="100px" :rules="propertyTypeRules" :hide-required-asterisk="true">
            <el-form-item label="中文名称" prop="name">
              <el-input v-model="propertyTypeModel.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="英文名称" prop="url">
              <el-input v-model="propertyTypeModel.url" autocomplete="off" :disabled="propertyTypeModel.urlDIsabled"></el-input>
            </el-form-item>
            <el-form-item label="数据类型">
              <el-select v-model="propertyTypeModel.type">
                <el-option v-for="item in typeData" :label="item.val" :value="item.key" :key="item.key"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="danger" @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="doPropertyType">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { savePropertyToObject, getPropertytype } from '@/api/archives'
import piny from '@/utils/piny.js'
import util from '@/utils'
export default {
    name: 'propertyEditor',
    data () {
        return {
            // 搜索条件
            cacheGroup: {
                name: '',
                id: ''
            },
            typeData: [], // 数据类型字典
            propertyTypeTitle: '',
            propertyTypeModel: {
                id: '',
                name: '',
                url: '',
                type: '',
                description: '',
                urlDIsabled: false,
                gid: ''
            },
            propertyTypeRules: {
                name: [{ required: true, message: '请输入中文名称', trigger: 'blur' }],
                url: [
                    { required: true, message: '请输入英文名称', trigger: 'blur' },
                    { pattern: /^[^.].*$/, message: 'URL不能以  .  开头' },
                    { pattern: /^[a-z0-9]*$/, message: '只能是小写字母和数字' }
                ]
            }
            // businessGroupRules: {
            // 	name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
            // },
            // businessTree: [],
            // ExistingPropertyList: [],
        }
    },
    props: {
        objectUri: String
    },
    mounted () {
        this.getTypeList()
        this.openAddTypeDialog()
    },
    methods: {
    // 随机生成uri
        generateUri () {
            this.propertyTypeModel.url = ''
            if (this.propertyTypeModel.name !== '') {
                this.propertyTypeModel.url = 'com.scistor.property.' + piny.getPy(this.propertyTypeModel.name) + util.getRandom(4)
            }
        },
        closeDialog () {
            this.$emit('closeDialog')
            this.openAddTypeDialog()
        },
        openAddTypeDialog () {
            this.propertyTypeTitle = '新增属性类型'
            this.propertyTypeModel.urlDIsabled = false
            this.propertyTypeModel.name = ''
            this.propertyTypeModel.url = ''
            this.propertyTypeModel.description = ''
            this.propertyTypeModel.id = ''
            this.propertyTypeModel.gid = ''
            this.$nextTick(() => {
                this.$refs.propertyTypeModel.clearValidate()
            })
        },
        doPropertyType () {
            this.$refs.propertyTypeModel.validate(valid => {
                if (valid) {
                    let uri = 'com.scistor.property.' + this.propertyTypeModel.url
                    let _postData = {
                        objectUri: this.objectUri,
                        propertyDto: {
                            id: this.propertyTypeModel.id,
                            uri: uri,
                            gid: this.propertyTypeModel.gid,
                            type: this.propertyTypeModel.type,
                            displayname: this.propertyTypeModel.name,
                            description: ' '
                        },
                        displayed: '0',
                        representative: '0',
                        indexed: '1'
                    }
                    this.postPropertyType(_postData)
                } else {
                    return false
                }
            })
        },

        postPropertyType (_postData) {
            savePropertyToObject(_postData).then(response => {
                this.$message(response.msg)
                this.openAddTypeDialog()
                this.closeDialog()
            })
        },
        getTypeList () {
            getPropertytype().then(response => {
                this.typeData = response.data
                this.propertyTypeModel.type = this.typeData[0]['key']
            })
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  height: 40px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
.header span {
  color: #1169c4;
  font-size: 20px;
  line-height: 30px;
}
.header .el-button {
  float: right;
}
.demo-form-inline {
  margin-top: 20px;
}
.el-tree-node__content button {
  opacity: 0;
  color: #333;
}
.el-tree-node__content button:hover {
  color: #111;
}
.el-tree-node__content:hover button {
  opacity: 1;
}
.grid-content .title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
}
.el-pagination {
  margin-top: 20px;
}
.el-select {
  width: 100%;
}
</style>
<style lang="less">
.propertyEditor {
  .dialog-footer {
    text-align: center;
  }
}
</style>
